<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SamplePage.aspx.cs" Inherits="Includes_jQuery_SamplePage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <style type="text/css">
        form div { width: 800px; margin: auto; }
        form div div { margin: 0px; padding: 2px 4px; }
        #input, #output, #template, #generated { width: 100%; }
        .left { width: 500px; display: inline-block; }
        .right { width: 100px; display: inline-block;}
        .left input { width: 500px; }
        .right input { width: 100%; }
        .green { background: green; }
        .red { background: red; }
        input.error { border: solid 1px red; }
        label.error { color: red; }
    </style>
    <link rel="Stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" />
    
    <script src="json2.js" type="text/javascript"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.microAjax.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {

            $('.toggleVis div').hide();

            $('.toggleVis').addClass('red').click(function () {
                $(this).toggleClass('red');
                $(this).find('div').toggle();
            });

            $('.causesValidation').live('click', function () {
                alert('Valid!');
            });

            $('.ajaxItem').live('click', function () {
                alert($(this).data().item.Guid);
            });

            $('#submit').click(function () {
                $('#showGenerated').microAjax({
                    url: $('#serviceUrl').val(),
                    data: $('#input').val(), //{ args: { Letters: 'testing' } }
                    template: {
                        templateHtml: $('#template').val(),
                        applicator: $('#templateMode').val()
                    },
                    errorCallback: function (xhr, errorType, ex) {
                        $('#output').val(function () {
                            var ret = "Error Occured!\r\nType: ";
                            ret += JSON.stringify(errorType);
                            ret += "\r\nException: ";
                            ret += JSON.stringify(ex);
                            ret += "\r\nXHR:\r\n\r\nStatus: ";
                            ret += xhr.status + " - " + xhr.statusText;
                            ret += "\r\nResponse:\r\n\t";
                            ret += xhr.responseText;

                            return ret;
                        });
                    },
                    completeCallback: function (data) {
                        $('#output').val(JSON.stringify(data));
                        $('#generated').html($('#showGenerated').html());
                        $('.causesValidation').click(function () {
                            alert('Valid?');
                            return true;
                        });
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

    
<div>
<div>
    JSON Paremeters:<br />
    <textarea id="input" name="input" rows="5" cols="80">{ args: { Letters: 'testing' } }</textarea>
</div>
<div>
    Template:<br />
    <textarea id="template" name="input" rows="5" cols="80">
        <li class="validationGroup">
            <b>Guid: </b><#= data.Guid #><br />
            <b>Random: </b><#= data.Random #><br />
            <b>E-Mail Validation:</b> <input name="em" type="text" /><br />
            <b>Required Validation:</b> <input name="r" type="text" /><br />
            <input type="button" class="causesValidation" value="Test Validation" />
            <ul>
                <#
                for (var x = 0; x < data.Children.length; x++) {
                    var item = data.Children[x];
                #>
                <li class="ajaxItem" data-item='<#= JSON.stringify(item) #>'>
                    <#= item.Letter #>
                </li>
                <#
                }
                #>
            </ul>
        </li>
    </textarea>
</div>
<div>
    <div class="left">
        <input type="text" id="serviceUrl" name="serviceUrl" value="TestMethod" />
    </div>
    <div class="right">
        <select id="templateMode">
            <option value="default">Default</option>
            <option value="prepend">Prepend</option>
            <option value="append">Append</option>
        </select>
    </div>
    <div class="right">
        <input type="button" id="submit" name="submit" value="Execute" />
    </div>
</div>
<div class="toggleVis">
    Raw Output:
    <div>
        AJAX Response:<br />
        <textarea id="output" name="output" rows="5" cols="80"></textarea>
    </div>
    <div>
        Template Output:<br />
        <textarea id="generated" name="output" rows="5" cols="80"></textarea>
    </div>
</div>
</div>
Generated HTML:
<ol id="showGenerated">

</ol>
    
    
    </form>
</body>
</html>
